<template>
  <el-container>
    <el-header>
      <div class="report_header" ref="headerHeight">
        <div class="report_header_left"></div>
        <div
          style="
            width: 300px;
            display: flex;
            align-items: center;
            margin-left: 10px;
          "
        >
          <svg-icon class="primary" :icon-class="$route.meta.icon" />
          <span style="margin-left: 5px" class="primary">{{
            $route.meta.title
          }}</span>
        </div>
        <div
          style="
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            width: 100%;
          "
        >
          <div
            style="
              display: flex;
              flex-direction: row;
              flex-wrap: wrap;
              overflow: hidden;
              height: 41px;
            "
          >
            <div class="report_header_query">
              <el-input
                prefix-icon="el-icon-search"
                placeholder="名称"
                v-model="query.name"
              ></el-input>
            </div>
          </div>
          <el-button
            style="margin-left: 10px; margin-top: 5px"
            size="small"
            type="primary"
            @click="queryNavigation"
            >查询</el-button
          >
          <el-button
            style="margin-left: 10px; margin-top: 5px"
            size="small"
            type="primary"
            @click="addClick"
            v-permission="['navigation.add']"
            >新增</el-button
          >
        </div>
      </div>
      <!--      <div>-->
      <!--        <svg-icon class="primary" :icon-class="$route.meta.icon"/>-->
      <!--        <span class="primary">{{$route.meta.title}}</span>-->
      <!--      </div>-->
      <!--      <div class="header-button-container">-->
      <!--        <el-button :icon="queryType? 'el-icon-search':'el-icon-close'" type="primary"-->
      <!--                   @click="chooseClick">{{queryType == false?'隐藏':'查询'}}-->
      <!--        </el-button>-->
      <!--        <el-button v-permission="['navigation.add']" icon="el-icon-plus" type="info" style="margin-left: 10px"-->
      <!--                   @click="addClick">新增-->
      <!--        </el-button>-->
      <!--      </div>-->
    </el-header>
    <div class="pd10">
      <!--      <div style="margin-bottom: 10px;display: flex;align-items: center" v-show="queryType == false">-->
      <!--        <el-input prefix-icon="el-icon-search" placeholder="名称" style="width: 200px" v-model="query.name"></el-input>-->
      <!--        <el-button style="margin-left: 10px" icon="el-icon-search" type="primary" @click="queryNavigation">查询-->
      <!--        </el-button>-->
      <!--        <el-button style="margin-left: 10px" icon="el-icon-refresh-right" type="info" @click="resetNavigation">重置-->
      <!--        </el-button>-->
      <!--      </div>-->
      <el-table
        :data="navigationForm"
        border
        stripe
        :height="curHeight"
        v-loadMore="[payLoads, 'navigation-list']"
        style="width: 100%"
      >
        <el-table-column label="图标" width="80" align="center">
          <template slot-scope="scope">
            <img
              style="width: 40px; height: 40px; border-radius: 4px"
              :src="scope.row.logo"
            />
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="name"> </el-table-column>
        <el-table-column label="类型" width="100" align="center">
          <template slot-scope="scope">
            <el-tag type="success">
              <span>{{ scope.row.type | watchType }}</span>
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="标签" align="center" width="240">
          <template slot-scope="scope">
            <div style="display: flex; flex-wrap: wrap">
              <div
                v-for="item in scope.row.tags"
                style="width: 33.33%; text-align: left; padding-bottom: 5px"
              >
                <el-tag type="success">
                  <span>{{ item.name }}</span>
                </el-tag>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="链接到" align="left" prop="typeName">
        </el-table-column>
        <el-table-column
          label="排序"
          align="center"
          width="80"
          prop="orders"
          :render-header="ordersIcons"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.orders"
              @blur="bulrOrders(scope.row)"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="80">
          <template slot-scope="scope">
            <div>
              <el-tooltip
                v-permission="['navigation.edit']"
                class="item"
                effect="dark"
                content="编辑"
                placement="top-start"
              >
                <a @click="editClick(scope.row)">
                  <i style="color: #409eff" class="el-icon-edit"></i>
                </a>
              </el-tooltip>
              <el-tooltip
                v-permission="['navigation.del']"
                class="item"
                effect="dark"
                content="删除"
                placement="top-start"
              >
                <a
                  style="margin-left: 10px"
                  @click="deleteNavigation(scope.row)"
                >
                  <i style="color: #f56c6c" class="el-icon-delete"></i>
                </a>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!--新增标签-->
      <el-dialog
        title="新增导航"
        v-el-drag-dialog
        :visible.sync="dialogFormVisible"
      >
        <el-container>
          <el-main class="popup_content">
            <el-form
              ref="addForm"
              :model="addForm"
              :rules="rules"
              label-width="80px"
              size="mini"
            >
              <el-form-item label="导航名称" prop="name">
                <el-input v-model="addForm.name"></el-input>
              </el-form-item>
              <el-form-item label="导航图标">
                <single-upload
                  :singleUploadTitle="singleUploadTitle"
                  v-model="addForm.logo"
                  style="display: inline-block"
                ></single-upload>
              </el-form-item>
              <el-form-item label="导航类型" prop="type">
                <el-select
                  style="width: 180px; display: inline-block"
                  v-model="addForm.type"
                  placeholder="请选择状态"
                  @change="changeClick"
                >
                  <el-option label="推荐标签" value="10"></el-option>
                  <el-option label="文章分类" value="0"></el-option>
                  <el-option label="商品详情" value="3"></el-option>
                  <el-option label="专题页面" value="2"></el-option>
                  <el-option label="商品分类" value="1"></el-option>
                  <el-option label="店铺首页" value="4"></el-option>
                  <el-option label="景点详情" value="5"></el-option>
                  <el-option label="文章详情" value="6"></el-option>
                  <el-option label="品牌专栏" value="18"></el-option>
                  <el-option label="自定义链接" value="12"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="位置标签" prop="tagData">
                <el-select
                  v-model="addForm.tagData"
                  multiple
                  placeholder="请选择标签"
                >
                  <el-option
                    v-for="item in tagForm"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="选择店铺" v-if="addForm.type == 3">
                <el-select
                  v-model="shopName"
                  value-key="id"
                  placeholder="请选择"
                  :loading="loading"
                  :filter-method="remoteMethodttwo"
                    filterable
                  @change="changeselect"
                >
                  <el-option
                    v-for="item in shopdata"
                    :key="item.id"
                    :label="item.name"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="链接到" v-show="addForm.type != 12">
                <el-select
                  v-model="state"
                  value-key="id"
                  @change="selectClick"
                  :loading="loading"
                  :filter-method="remoteMethod"
                   filterable
                  placeholder="请输入关键词"
                >
                  <el-option
                    v-for="item in linkForm"
                    :key="item.id"
                    :label="item.name"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="链接到" v-show="addForm.type == 12">
                <el-input v-model="addForm.url"></el-input>
              </el-form-item>
            </el-form>
          </el-main>
        </el-container>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button
            type="primary"
            :loading="clicked"
            @click="saveNavigation('addForm')"
            >确 定</el-button
          >
        </div>
      </el-dialog>
      <!--编辑标签-->
      <el-dialog title="编辑导航" v-el-drag-dialog :visible.sync="editVisible">
        <el-container>
          <el-main class="popup_content">
            <el-form
              ref="editForm"
              :model="editForm"
              :rules="rules"
              label-width="80px"
              size="mini"
            >
              <el-form-item label="导航名称" prop="name">
                <el-input v-model="editForm.name"></el-input>
              </el-form-item>
              <el-form-item label="导航图标">
                <single-upload
                  :singleUploadTitle="singleUploadTitle"
                  :key="Math.random()"
                  v-model="editForm.logo"
                  style="display: inline-block"
                ></single-upload>
              </el-form-item>
              <el-form-item label="导航类型" prop="type">
                <el-select
                  style="width: 180px; display: inline-block"
                  v-model="editForm.type"
                  placeholder="请选择状态"
                  @change="changeClick"
                >
                  <!-- <el-option label="商品详情" value="3"></el-option>
                  <el-option label="专题页面" value="2"></el-option>
                  <el-option label="商品分类" value="1"></el-option>
                  <el-option label="品牌专栏" value="18"></el-option>
                  <el-option label="自定义链接" value="12"></el-option> -->
                  <el-option label="推荐标签" value="10"></el-option>
                  <el-option label="文章分类" value="0"></el-option>
                  <el-option label="商品详情" value="3"></el-option>
                  <el-option label="专题页面" value="2"></el-option>
                  <el-option label="商品分类" value="1"></el-option>
                  <el-option label="店铺首页" value="4"></el-option>
                  <el-option label="景点详情" value="5"></el-option>
                  <el-option label="文章详情" value="6"></el-option>
                  <el-option label="品牌专栏" value="18"></el-option>
                  <el-option label="自定义链接" value="12"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="位置标签" prop="tagData">
                <el-select
                  v-model="editForm.tagData"
                  multiple
                  placeholder="请选择标签"
                >
                  <el-option
                    v-for="item in tagForm"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="选择店铺" v-if="editForm.type == 3">
                <el-select
                  v-model="shopName"
                  value-key="id"
                  placeholder="请选择"
                  :loading="loading"
                  :filter-method="remoteMethodttwo"
                  filterable
                  @change="changeselect"
                 @focus='focusshopName'
                >
                  <el-option
                    v-for="item in shopdata"
                    :key="item.id"
                    :label="item.name"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              
              <el-form-item label="链接到" v-show="editForm.type != 12&&editForm.type == 3">
                <el-select
                  v-model="state"
                  value-key="id"
                  @change="selectClick"
                  :loading="loading"
                  :filter-method="remoteMethod"
                  @focus='focusshopNametype'
                  filterable
                  placeholder="请输入关键词"
                >
                  <el-option
                    v-for="item in linkForm"
                    :key="item.id"
                    :label="item.name"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="链接到" v-show="editForm.type != 12&&editForm.type!=3">
                <el-select
                  v-model="state"
                  value-key="id"
                  @change="selectClick"
                  :loading="loading"
                  :filter-method="remoteMethod"
                  filterable
                  placeholder="请输入关键词"
                >
                  <el-option
                    v-for="item in linkForm"
                    :key="item.id"
                    :label="item.name"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="链接到"
                prop="url"
                v-show="editForm.type == 12"
              >
                <el-input v-model="editForm.url"></el-input>
              </el-form-item>
            </el-form>
          </el-main>
        </el-container>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editVisible = false">取 消</el-button>
          <el-button
            type="primary"
            :loading="clicked"
            @click="updateNavigation('editForm')"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
    <el-footer class="el-footerBox">
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="pageNum"
        :limit.sync="pageSize"
        @pagination="loadNavigation"
      ></pagination>
    </el-footer>
  </el-container>
</template>

<script>
import loadMore from "@/utils/loadMore.js";
import permission from "@/directive/permission/index.js"; // 权限判断指令
import { list, del, find, save,update} from "@/api/navigation";
import utils from "../../utils/utils.js";
import Pagination from "@/components/Pagination";
import SingleUpload from "@/components/Upload/singleUpload";
import elDragDialog from "@/directive/el-drag-dialog"; // base on element-ui
import { list as articleList } from "@/api/articleCategory";
import { list as tagList } from "@/api/tag";
import { list as product } from "@/api/product";
import { list as wxPage } from "@/api/wxPage";
import { list as brand } from "@/api/brand";
import { list as productCategory } from "@/api/productCategory";
import { mchList} from "@/api/shop";
import { list as sceniclist } from "@/api/scenic";
import { list as artlist } from "@/api/article";
export default {
  directives: { elDragDialog, permission, loadMore },
  name: "navigation-list",
  activated() {
    this.payLoads = new Date().getTime();
  },
  data() {
    return {
      shopName: "",
      shopdata: [],
      singleUploadTitle: "200*200",
      number: 1,
      payLoads: "",
      addForm: {
        name: "",
        url: "",
        logo: "",
        type: "",
        tagData: [],
      },
      dialogFormVisible: false,
      rules: {
        name: [
          { required: true, message: "请输入导航名称", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "长度在 2 到 20 个字符",
            trigger: "blur",
          },
        ],
        type: [{ required: true, message: "请选择导航类型", trigger: "blur" }],
        logo: [{ required: true, message: "请选择导航图标", trigger: "blur" }],
        tagData: [
          { required: true, message: "请选择位置标签", trigger: "blur" },
        ],
        tagid: [{ required: true, message: "请选择位置标签", trigger: "blur" }],
      },
      editVisible: false,
      editForm: {
        id: "",
        name: "",
        url: "",
        logo: "",
        type: "",
        typeId: "",
        tagData: [],
      },
      navigationForm: [],
      pageNum: 1,
      pageSize: 20,
      total: 0,
      queryType: true,
      query: {
        name: "",
      },
      keyword: {
        name: "",
      },
      clicked: false,
      curHeight: null,
      tagForm: [],
      state: "",
      timeout: null,
      sorting: {
        id: "",
        orders: "",
      },
      pageNums: 1,
      pageSizes:20,
      classificationType: "",
      loadingType: true,
      linkForm: [],
      loading: false,
      adName: "",
    };
  },
  components: { Pagination, SingleUpload },
  created() {
    this.loadNavigation();
  },
  filters: {
    watchType(val) {
      let text = "";
      switch (val) {
        case 0:
          text = "文章分类";
          break;
        case 3:
          text = "商品详情";
          break;
        case 1:
          text = "商品分类";
          break;
        case 2:
          text = "专题页面";
          break;
        case 4:
          text = "店铺首页";
          break;
        case 5:
          text = "景点详情";
          break;
        case 6:
          text = "文章详情";
          break;
        case 12:
          text = "外部链接";
          break;
        case 18:
          text = "品牌专栏";
          break;
        case 10:
          text = "推荐标签";
          break;

      }
      return text;
    },
  },
  mounted() {
    this.comeIn();
    this.beforeMount();
    this.tagList();
  },
  methods: {
    saveNavigation(addForm) {
      var _this = this;
      this.$refs[addForm].validate((valid) => {
        if (valid) {
          // 校验表单
          _this.clicked = true;
          let params = new URLSearchParams();
          _this.addForm.tagData.forEach(function (item) {
            params.append("tagIds", item);
          });
          if (_this.addForm.type == 12) {
            _this.addForm.typeName = _this.addForm.url;
          }

          var addForm = {
            name: _this.addForm.name,
            url: _this.addForm.url,
            logo: _this.addForm.logo,
            type: _this.addForm.type,
            typeId: _this.addForm.typeId,
            typeName: _this.addForm.typeName,
            orders: _this.total + 1,
          };
          save(addForm, params)
            .then((response) => {

              console.log(this.navigationForm.length);
              console.log(addForm);
              _this.clicked = false;
              _this.dialogFormVisible = false;
              _this.loadNavigation();
              _this.$message({
                message: response.content,
                offset: 120,
                center: true,
              });
            })
            .catch((error) => {
              _this.clicked = false;
              console.log("error!!");
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //新增
    addClick() {
      this.addForm.name = "";
      this.addForm.logo = "";
      this.addForm.url = "";
      this.addForm.type = "";
      this.addForm.tagData = [];
      this.addForm.typeId = "";
      this.state = "";
      this.typeName = "";
      this.linkForm = [];
      this.dialogFormVisible = true;
      this.linkForm = [];
      this.dialogFormVisible = true;
      this.pageNums = 1;
      this.adName = "";
      this.shopName = "";
    },
    //  编辑
    editClick(row) {
      this.editForm.id = row.id;
      this.linkForm = [];
      this.pageNums = 1;
      this.findNavigation();
      this.editVisible = true;
      this.adName = "";
    },
    findNavigation() {
      var _this = this;
      _this.editForm.tagData = [];
      find(_this.editForm.id)
        .then((response) => {
          console.log(response);
          _this.editForm.name = response.data.navigation.name;
          _this.editForm.url = response.data.navigation.url;
          _this.editForm.logo = response.data.navigation.logo;
          _this.editForm.type = JSON.stringify(response.data.navigation.type);
          _this.editForm.typeId = response.data.navigation.typeId;
          _this.editForm.typeName = response.data.navigation.typeName;
          _this.classificationType = response.data.navigation.type;
          _this.shopName = response.data.shopName;
          _this.enterpriseId = response.data.enterpriseId;
          response.data.navigation.tags.forEach(function (item) {
            _this.editForm.tagData.push(item.id);
          });
               _this.state = {  
            id: response.data.navigation.typeId,
            name: response.data.navigation.typeName,
          };
          console.log(_this.classificationType);
          if (this.classificationType == 0) {
            _this.articleClick();
          } else if (this.classificationType == 1) {
            _this.productCategoryClick();
          } else if (this.classificationType == 3) {
            _this.productClick();
          } else if (this.classificationType == 2) {
            _this.wxPageClick();
          } else if (this.classificationType == 18) {
            _this.brandClick();
          } else if (this.classificationType == 4) {
            _this.prolist();
          } else if (this.classificationType == 5) {
            _this.sceniclist();
          } else if (this.classificationType == 6) {
            _this.artlist();
          } else {
            _this.linkForm = [];
          }
          // _this.state = {
          //   id: response.data.navigation.typeId,
          //   name: response.data.navigation.typeName,
          // };
          console.log(_this.state);
        })
        .catch((error) => {
          console.log("error!!");
        });
    },
    updateNavigation(editForm) {
      var _this = this;
      this.$refs[editForm].validate((valid) => {
        if (valid) {
          // 校验表单
          _this.clicked = true;
          let params = new URLSearchParams();

          _this.editForm.tagData.forEach(function (item) {
            params.append("tagIds", item);
          });
          if (_this.editForm.type == 12) {
            _this.editForm.typeName = _this.editForm.url;
          }
          var editForm = {
            id: _this.editForm.id,
            name: _this.editForm.name,
            url: _this.editForm.url,
            logo: _this.editForm.logo,
            type: _this.editForm.type,
            typeId: _this.editForm.typeId,
            typeName: _this.editForm.typeName,
          };
          update(editForm, params)
            .then((response) => {
              console.log(response);
              _this.clicked = false;
              _this.editVisible = false;
              _this.loadNavigation();
              _this.$message({
                message: response.content,
                offset: 120,
                center: true,
              });
            })
            .catch((error) => {
              _this.clicked = false;
              console.log("error!!");
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    beforeMount() {
      var _this = this;
      window.onresize = () => {
        return (() => {
          if (this.queryType == false) {
            var h =
              document.documentElement.clientHeight ||
              document.body.clientHeight;
            _this.curHeight = h - 266; //减去页面上固定高度height
          } else {
            var h =
              document.documentElement.clientHeight ||
              document.body.clientHeight;
            _this.curHeight = h - 220; //减去页面上固定高度height
          }
        })();
      };
    },
    comeIn() {
      console.log("222");
      var h =
        document.documentElement.clientHeight || document.body.clientHeight;
      this.curHeight = h - 220; //减去页面上固定高度height
    },
    chooseClick() {
      this.queryType = !this.queryType;
      if (this.queryType == false) {
        var h =
          document.documentElement.clientHeight || document.body.clientHeight;
        this.curHeight = h - 266; //减去页面上固定高度height
      } else {
        var h =
          document.documentElement.clientHeight || document.body.clientHeight;
        this.curHeight = h - 220; //减去页面上固定高度height
      }
    },
    deleteNavigation(data) {
      console.log(data);
      var _this = this;
      this.$confirm("确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          del(data.id)
            .then((response) => {
              console.log(response);
              _this.navigationForm.forEach(function (item, index) {
                if (item.id == data.id) {
                  _this.navigationForm.splice(index, 1);
                }
              });
              _this.$message({
                message: response.content,
                offset: 120,
                center: true,
              });
            })
            .catch((error) => {
              console.log("error!!");
            });
        })
        .catch(() => {});
    },
    queryNavigation() {
      this.keyword = this.query;
      this.pageNum = 1;
      this.loadNavigation();
    },
    resetNavigation() {
      this.query.name = "";
      this.keyword = this.query;
      this.pageNum = 1;
      this.loadNavigation();
    },
    loadNavigation() {
      var _this = this;
      let params = new URLSearchParams();
      params.append("pageNum", _this.pageNum);
      params.append("pageSize", _this.pageSize);
      params.append("name", _this.keyword.name);
      list(params)
        .then((response) => {
          _this.navigationForm = response.data.data;
          _this.total = response.data.total;
          console.log(this.navigationForm);
        })
        .catch((error) => {
          console.log("error!!");
        });
    },
    tagList() {
      var _this = this;
      let params = new URLSearchParams();
      params.append("pageNum", 1);
      params.append("pageSize", 20);
      params.append("type", 9);
      tagList(params)
        .then((response) => {
          console.log(response);
          _this.tagForm = response.data.data;
        })
        .catch((error) => {
          console.log("error!!");
        });
    },
    articleClick() {
      var _this = this;
      this.pageSizes=50;
      let params = new URLSearchParams();
      params.append("pageNum", _this.pageNums);
      params.append("pageSize", _this.pageSizes);
      params.append("name", _this.adName);
      // params.append('articleType', 0);
      articleList(params)
        .then((response) => {
          console.log(response);
          _this.linkForm = response.data;
          console.log(_this.linkForm);
        })
        .catch((error) => {
          console.log("error");
        });
    },
    productClick() {
      let params = new URLSearchParams();
      params.append("pageNum", this.pageNums);
      params.append("pageSize", this.pageSizes);
      params.append("name", this.adName);
      params.append("enterpriseId", this.enterpriseId);
      product(params)
        .then((res) => {
          res.data.data.forEach(item=>{
            if(item.id!=this.state.id){
              res.data.data.unshift(this.state)
              res.data.data=Array.from(new Set(res.data.data))
            }
          })
          this.linkForm = res.data.data;
          console.log(this.linkForm);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    productCategoryClick() {
      this.pageSizes=50;
      let params = new URLSearchParams();
      params.append("pageNum", this.pageNums);
      params.append("pageSize", this.pageSizes);
      params.append("name", this.adName);
      productCategory(params)
        .then((res) => {
          console.log(res);
          this.linkForm = res.data;
          console.log(this.linkForm);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    brandClick() {
      let params = new URLSearchParams();
      params.append("pageNum", this.pageNums);
      params.append("pageSize", this.pageSizes);
      params.append("title", this.adName);
      brand(params)
        .then((res) => {
          console.log(res);
          this.linkForm = res.data.data;
          console.log(this.linkForm);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    wxPageClick() {
      let params = new URLSearchParams();
      params.append("pageNum", this.pageNums);
      params.append("pageSize", this.pageSizes);
      params.append("name", this.adName);
      wxPage(params)
        .then((res) => {
          console.log(res);
          this.linkForm = res.data.data;
          console.log(this.linkForm);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    prolist() {
      let params = new URLSearchParams();
      params.append("pageNum", this.pageNums);
      params.append("pageSize", this.pageSizes);
      params.append("name", this.adName);
      mchList(params)
        .then((res) => {
          console.log(res);
          this.linkForm = res.data.data;
          this.shopdata = res.data.data;
          console.log(this.linkForm);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    sceniclist() {
      let params = new URLSearchParams();
      params.append("pageNum", this.pageNums);
      params.append("pageSize", this.pageSizes);
      params.append("name", this.adName);
      sceniclist(params)
        .then((res) => {
          console.log(res);
          this.linkForm = res.data.data;
          console.log(this.linkForm);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    artlist() {
      let params = new URLSearchParams();
      params.append("pageNum", this.pageNums);
      params.append("pageSize", this.pageSizes);
      params.append("title", this.adName);
      artlist(params)
        .then((res) => {
          console.log(res);

          res.data.data.forEach((item) => {
            item.name = item.title;
          });
          this.linkForm = res.data.data;
          console.log(this.linkForm);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    changeClick(val) {
      // 点击加载
      console.log(val);
      var _this = this;
      this.addForm.typeId = "";
      this.editForm.typeId = "";
      this.state = "";
      this.typeName = "";
      this.pageNums = 1;
      this.classificationType = val;
      this.linkForm = [];
      this.adName = "";
      if (this.classificationType == 0) {
        _this.articleClick();
      } else if (this.classificationType == 1) {
        _this.productCategoryClick();
      } else if (this.classificationType == 3) {
        _this.prolist();
        // _this.productClick();
      } else if (this.classificationType == 2) {
        _this.wxPageClick();
      } else if (this.classificationType == 4) {
        _this.prolist();
      } else if (this.classificationType == 5) {
        _this.sceniclist();
      } else if (this.classificationType == 6) {
        _this.artlist();
      } else if (this.classificationType == 18) {
        _this.brandClick();
      } else if (this.classificationType == 10) {
        _this.getRemmendTagList();
      } else {
        _this.linkForm = [];
      }
    },
    getRemmendTagList(){
      var _this = this;
      let params = new URLSearchParams();
      params.append("pageNum", 1);
      params.append("pageSize", 20);
      params.append("type", 10);
      tagList(params)
        .then((response) => {
          console.log(response);
          _this.tagForm = response.data.data;
        })
        .catch((error) => {
          console.log("error!!");
        });
    },
    bulrOrders(data) {
      console.log(data);
      this.sorting.id = data.id;
      this.sorting.orders = data.orders;
      this.saveSorting();
    },
    saveSorting() {
      var _this = this;
      update(_this.sorting)
        .then((response) => {
          console.log(response);
          _this.navigationForm.forEach(function (item) {
            if (item.id == response.data.id) {
              item.orders = response.data.orders;
            }
          });
          _this.$message({
            message: response.content,
            offset: 120,
            center: true,
          });
        })
        .catch((error) => {
          console.log("error!!");
        });
    },
    ordersIcons(h, { column }) {
      const inReview = "点击下方数字区域可直接更改排序。";
      return h("div", [
        h("span", column.label),
        h(
          "el-tooltip",
          {
            props: {
              placement: "top",
            },
          },
          [
            h(
              "div",
              {
                slot: "content",
                style: {
                  width: "200px",
                  whiteSpace: "normal",
                  "margin-bottom": "10px",
                },
              },
              inReview
            ),
            h("i", {
              class: "el-icon-question",
              style: "color:#888888;margin-left:5px;position:absolute",
            }),
          ]
        ),
      ]);
    },
    selectClick(item) {
      console.log(item);
      var _this = this;
      if (_this.dialogFormVisible == true) {
        _this.addForm.typeId = item.id;
        _this.addForm.typeName = item.name;
      } else if (_this.editVisible == true) {
        _this.editForm.typeId = item.id;
        _this.editForm.typeName = item.name;
      }
    },
    remoteMethod(query) {
      console.log(query);
      var _this = this;
      this.adName = query;
    
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          if (this.classificationType == 0) {
            _this.articleClick();
           } 
          else if (this.classificationType == 1) {
            _this.productCategoryClick();
          }
           else if (this.classificationType == 3) {
            _this.productClick();
          } else if (this.classificationType == 2) {
            _this.wxPageClick();
          } else if (this.classificationType == 4) {
            _this.prolist();
          } else if (this.classificationType == 18) {
            _this.brandClick();
          } else if (this.classificationType == 5) {
            _this.sceniclist();
          } else if (this.classificationType == 6) {
            _this.artlist();
          } else {
            _this.linkForm = [];
          }
        }, 200);
    
    },
    remoteMethodttwo(query) {
      this.adName = query;
      console.log(query);
      if (this.classificationType == 3) {
        this.prolist();
      } else {
        this.linkForm = [];
      }
    },

    changeselect(val) {
      console.log(val);
      this.shopName = val.name;
      this.enterpriseId = val.enterpriseId;
      this.productClick();
    },
    focusshopName(){
      this.adName=''
      this.prolist();
    },
    focusshopNametype(){
      if(this.shopName!=""){
        this.adName=''
       this.productClick();
      }else{return}
    
    }
  },
};
</script>

<style scoped>
.el-footerBox {
  height: 50px !important;
  line-height: 50px !important;
  border-top: 1px solid #eeeeee;
}

/deep/ .el-dialog__header {
  border: 1px solid #eeeeee !important;
  padding: 15px !important;
}

/deep/ .el-dialog__body {
  padding: 0px 20px !important;
}

.popup_content {
  padding-bottom: 0px !important;
}
.app {
  background-color: rgba(248, 248, 248, 0.8);
}

/deep/.el-header {
  padding: 10px;
  /* height: 100% !important; */
  padding-bottom: 0;
}

.report_header {
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  background-color: rgba(248, 248, 248, 0.8);
  display: flex;
  align-items: center;
  padding-bottom: 5px;
  position: relative;
  padding-left: 5px;
  padding-right: 5px;
}
.report_header_left {
  width: 5px;
  height: 100%;
  background-color: #409eff;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}
.report_header_date {
  margin-left: 10px;
  width: 250px;
  margin-top: 5px;
}
.report_header_query {
  margin-left: 10px;
  width: 180px;
  margin-top: 5px;
}
</style>
